<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 注意事项:
        先引入公共文件
        最后引入自己独立文件
    -->
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./fonts/icomoon.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 
        6. 弹性盒子网页布局 (3, 4, 3)
        7. 主体盒子设置背景图
        8. 设置网页公共样式(边框图片)
        9. 完成左侧盒子布局
        10. 完成中间盒子布局
        11. 完成右侧盒子布局
    -->

    <!-- 网页布局 -->
    <div class="main_body">
        <!-- 左侧盒子 -->
        <div class="letfBox">

            <!-- 左侧第一个顶部盒子 -->
            <div class="left_topBox">
                <div class="item">
                    <h4>2190</h4>
                    <p>
                        <!-- 设置字体图标 -->
                        <span class="icon-dot"></span>
                        设备总数
                    </p>
                </div>
                <div class="item">
                     <h4>2190</h4>
                     <p>
                         <!-- 设置字体图标 -->
                         <span class="icon-dot"></span>
                         设备总数
                     </p>
                </div>
                <div class="item">
                      <h4>2190</h4>
                      <p>
                          <!-- 设置字体图标 -->
                          <span class="icon-dot"></span>
                          设备总数
                      </p>
                </div>
                <div class="item">
                       <h4>2190</h4>
                       <p>
                           <!-- 设置字体图标 -->
                           <span class="icon-dot"></span>
                           设备总数
                       </p>
                </div>
            
            </div>
         <!-- 左侧第二个盒子 -->
            <div class="left_topBox2">
                <!-- 顶部标题 -->
                <div class="title">
                    <a href="javascript:;" data-msg="list1">故障设备监控</a>
                    <div class="line"></div>
                    <a href="javascript:;" class="active" data-msg="list2">异常设备监控</a>
                </div>

                <!-- 提示标题 -->
                <div class="tips_title">
                    <div class="itme">故障时间</div>
                    <div class="itme">设备地址</div>
                    <div class="itme">异常代码</div>
                </div>

                <!-- 内容列表区域 -->
                <div class="content">
                    <ul class="list1" style="display: none">
                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>

                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20210506</span>
                            <span>故障北京昌平回龙观</span>
                            <span>10086</span>
                        </li>
                    </ul>

                    <ul class="list2">
                        <li>
                            <span>20210507</span>
                            <span>异常北京顺义马坡</span>
                            <span>10010</span>
                        </li>
                        <li>
                            <span>20210507</span>
                            <span>异常北京顺义马坡</span>
                            <span>10010</span>
                        </li>
                        <li>
                            <span>20210507</span>
                            <span>异常北京顺义马坡</span>
                            <span>10010</span>
                        </li>
                        <li>
                            <span>20210507</span>
                            <span>异常北京顺义马坡</span>
                            <span>10010</span>
                        </li>
                        <li>
                            <span>20210507</span>
                            <span>异常北京顺义马坡</span>
                            <span>10010</span>
                        </li>
                        <li>
                            <span>20210507</span>
                            <span>异常北京顺义马坡</span>
                            <span>10010</span>
                        </li>
                        <li>
                            <span>20210507</span>
                            <span>异常北京顺义马坡</span>
                            <span>10010</span>
                        </li>
                        <li>
                            <span>20210507</span>
                            <span>异常北京顺义马坡</span>
                            <span>10010</span>
                        </li>
                        <li>
                            <span>20210507</span>
                            <span>异常北京顺义马坡</span>
                            <span>10010</span>
                        </li>
                        <li>
                            <span>20210507</span>
                            <span>异常北京顺义马坡</span>
                            <span>10010</span>
                        </li>
                    </ul>
                </div>
            </div>
                <!-- 左侧最后一个盒子 -->
                <div class="left_botBox">
                    <div class="title">
                        点位分析统计
                    </div>
                    <!-- 内容盒子 -->
                    <div class="content">
                    <!-- 饼状图 -->
                        <div class="left_pieBox" ></div>
                        <!-- 信息展示盒子 -->
                        <div class="tight_msgShow">
                            <div class="item">
                                <h4>320,11</h4>
                           <p>
                            <span class="icon-dot"></span>
                            点位总数
                           </p>
                            </div>
                            <div class="item">
                                <h4>320,11</h4>
                            <p>
                                <span class="icon-dot"></span>
                            点位总数
                            </p>
                            </div>
                        </div>
                    </div>
                </div>
        </div>

        <!-- 中间盒子 -->
        <div class="middleBox">
            <div class="zx">
                <p> <span class="icon-cube"></span>
                    设备数据统计</p>
                </div>
                <div class="map" id="mymap"></div>
                <!-- 第三个柱状图 -->
                <div class="bot_boxBar">
                    <div class="title">全国用户总量统计</div>
                    <!-- 内容区域 -->
                    <div class="content">
                        <div class="leftBar" id="leftBar"></div>
                    <!-- 右侧信息展示 -->
                    <div class="right_msg">
                        <div class="item">
                            <h4>320,11</h4>
                        <p>
                            <span class="icon-dot"></span>
                        点位总数
                        </p>
                        </div>
                        <div class="item">
                            <h4>320,11</h4>
                        <p>
                            <span class="icon-dot"></span>
                        点位总数
                        </p>
                        </div>
                    </div>
                    </div>
                    
                </div>
        </div>

        <!-- 右边盒子 -->
        <div class="rightBox">
            <!-- 第一个盒子 -->
            <div class="right_top1Box">
                <!-- 顶部标题 -->
                <div class="title">
                    <a href="javascript:;" class="active" data-msg="year">365天</a>
                    <div class="line"></div>
                    <a href="javascript:;"  data-msg="jd">90天</a>
                    <div class="line"></div>
                    <a href="javascript:;" data-msg="month">30天</a>
                    <div class="line"></div>
                    <a href="javascript:;" data-msg="day">24小时</a>
                </div>

                <!-- 底部内容 -->
                <div class="content">
                    <div class="item" id="year">
                        <div class="leftitem">
                            <h4>1,987</h4>
                            <p>
                                <span class="icon-dot" style="color: #ed3f35;"></span>
                                订单量
                            </p>
                        </div>
                        <div class="rightitem">
                             <h4>2,987</h4>
                             <p>
                                 <span class="icon-dot" style="color: #e4c918"></span>
                                 销售额(万元)
                             </p>
                        </div>
                    </div>
                    <div class="item" id="jd" style="display: none;">
                         <div class="leftitem">
                             <h4>4,987</h4>
                             <p>
                                 <span class="icon-dot" style="color: #ed3f35;"></span>
                                 订单量
                             </p>
                         </div>
                         <div class="rightitem">
                             <h4>6,987</h4>
                             <p>
                                 <span class="icon-dot" style="color: #e4c918"></span>
                                 销售额(万元)
                             </p>
                         </div>
                    </div>

                    <div class="item" id="month" style="display: none;">
                          <div class="leftitem">
                              <h4>8,987</h4>
                              <p>
                                  <span class="icon-dot" style="color: #ed3f35;"></span>
                                  订单量
                              </p>
                          </div>
                          <div class="rightitem">
                              <h4>9,987</h4>
                              <p>
                                  <span class="icon-dot" style="color: #e4c918"></span>
                                  销售额(万元)
                              </p>
                          </div>
                    </div>

                    <div class="item" id="day" style="display: none;">
                           <div class="leftitem">
                               <h4>2,987</h4>
                               <p>
                                   <span class="icon-dot" style="color: #ed3f35;"></span>
                                   订单量
                               </p>
                           </div>
                           <div class="rightitem">
                               <h4>5,987</h4>
                               <p>
                                   <span class="icon-dot" style="color: #e4c918"></span>
                                   销售额(万元)
                               </p>
                           </div>
                    </div>
                    
                </div>
               
           </div>
           <!--  第二个盒子 -->
           <div class="right_top2Box">
            <div class="title">
                <span>销售统计</span>
                <div class="line"></div>
                <a href="javascript:;" class="active" data-msg="year">年</a>
                <a href="javascript:;" data-msg="quarter">季</a>
                <a href="javascript:;" data-msg="month">月</a>
                <a href="javascript:;" data-msg="week">周</a>
            </div>
            <div class="content">
                <div class="lineBox" id="lineBox"></div>
            </div>
        </div>
        <!-- 第三个盒子 -->
        <div class="right_top3Box">
            <!-- 左侧盒子 -->
            <div class="leftBox_">
                <!-- 标题 -->
                <div class="public_title">
                    渠道分布
                </div>
                <div class="content">

                    <div class="topitem">
                        <div class="leftItem_">
                            <h4>39%</h4>
                            <p>
                                <span class="icon-plane"></span>
                                机场
                            </p>
                        </div>
                        <div class="rithtItem_">
                            <h4>28%</h4>
                            <p>
                                <span class="icon-bag"></span>
                                商场
                            </p>
                        </div>
                    </div>

                    <div class="topitem">
                        <div class="leftItem_">
                            <h4>39%</h4>
                            <p>
                                <span class="icon-plane"></span>
                                机场
                            </p>
                        </div>
                        <div class="rithtItem_">
                            <h4>28%</h4>
                            <p>
                                <span class="icon-bag"></span>
                                商场
                            </p>
                        </div>
                    </div>

                </div>

            </div>

            <!-- 右侧盒子 -->
            <div class="rightBox_">
                <!-- 标题 -->
                <div class="public_title">
                    一季度销售进度
                </div>

                <!-- 饼状统计图 -->
                <div class="bot_pie" id="bot_pie"></div>

                <!-- 数字展示 -->
                <div class="numb_show">
                     75%
                </div>
                <div class="topitem">
                    <div class="leftItem_">
                        <h4>39%</h4>
                        <p> 
                            <span class="icon-plane"></span>
                            机场
                        </p>
                    </div>
                    <div class="rithtItem_">
                        <h4>28%</h4>
                        <p>
                            <span class="icon-bag"></span>
                            商场
                        </p>
                    </div>
                </div>
            </div>
            </div>
            <!-- 最后一个盒子 -->
            <div class="last_box">
                <div class="title">
                    <a href="javascript:;">全国热榜</a>
                    <a href="javascript:;">各省销售</a>
                    <a href="javascript:;">//进30日//</a>
                </div>

                <div class="content">
                    <div class="list1">
                        <div class="list">
                            <span class="icon-cup1" style="color:#d93f36"></span>
                            可爱多
                        </div>
                        <div class="list">
                            <span class="icon-cup2" style="color:#68d8fe"></span>
                            娃哈哈
                        </div>
                        <div class="list">
                            <span class="icon-cup3" style="color:#4c9bfd"></span>
                            喜之郎
                        </div>
                    </div>

                    <div class="list2">
                        <div class="item">
                            <span>北京</span>
                            <span>25179</span>
                            <span class="icon-up"></span>
                        </div>
                        <div class="item">
                             <span>河北</span>
                             <span>25179</span>
                             <span class="icon-up"></span>
                        </div>
                        <div class="item">
                             <span>山东</span>
                             <span>25179</span>
                             <span class="icon-up"></span>
                        </div>
                        <div class="item">
                             <span>江苏</span>
                             <span>25179</span>
                             <span class="icon-up"></span>
                        </div>
                        <div class="item">
                             <span>上海</span>
                             <span>25179</span>
                             <span class="icon-up"></span>
                        </div>
                    </div>

                    <div class="list3">
                        <div class="item">
                             <span>八喜</span>
                             <span>7609</span>
                             <span class="icon-up" style="color: tomato"></span>
                        </div>
                         <div class="item">
                             <span>娃哈哈</span>
                             <span>7609</span>
                             <span class="icon-up" style="color: tomato"></span>
                         </div>
                          <div class="item">
                              <span>可爱多</span>
                              <span>7609</span>
                              <span class="icon-up" style="color: tomato"></span>
                          </div>
                           <div class="item">
                               <span>喜姿郎</span>
                               <span>7609</span>
                               <span class="icon-up" style="color: tomato"></span>
                           </div>
                            <div class="item">
                                <span>可乐</span>
                                <span>7609</span>
                                <span class="icon-up" style="color: tomato"></span>
                            </div>
                             <div class="item">
                                 <span>雪碧</span>
                                 <span>7609</span>
                                 <span class="icon-up" style="color: tomato"></span>
                             </div>
                    </div>
                </div>

            </div>
        </div>
        </div>
    </div>
    

    <!-- 引入js文件 -->
    <script src="./js/jQuery.min.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/china.js"></script>
    <script src="./js/shipei.js"></script>
    <script src="./js/index.js"></script>
</body>
</html>